<template>
  <el-dialog :visible.sync="dialogVisible" :append-to-body="true" :title="dialogText"
             width="50%" @open="open">
    <el-form ref="form" :model="form" label-width="100px" :rules="formRuler">
      <el-form-item prop="id" label="FQA编号">
        <el-input :disabled="true" v-model="form['id']"/>
      </el-form-item>
      <el-form-item prop="question" label="问题">
        <el-input v-model="form['question']"/>
      </el-form-item>
      <el-form-item prop="answer" label="回答">
        <el-input v-model="form['answer']"/>
      </el-form-item>
    </el-form>
    <span slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button @click="resetDialog">重置</el-button>
        <el-button @click="handleSubmit" :loading="submitLoading" type="primary">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { changeQuestionById, saveFqas } from '@/api/ApiFrequentlyQuestion'
import QuestionInsertDTO from '@/api/entity/QuestionInsertDTO'
import { ResultCode } from '@/constants/constants'
import QuestionChangeDTO from '@/api/entity/QuestionChangeDTO'

export default {
  name: 'GoodFqaDialog',
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    data: {
      required: false,
      type: [Object],
      default: null
    },
    goodId: {
      required: true,
      type: [Number, String]
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      queryLoading: false,
      submitLoading: false,
      dialogVisible: false,
      form: {},
      formRuler: {
        question: [{
          required: true,
          message: '问题不能为空',
          trigger: 'blur'
        }],
        answer: [{
          required: true,
          message: '回答不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    isEdit () {
      return this.data && this.data.id && this.data.id > 0
    },
    isAdd () {
      return !this.isEdit
    },
    dialogText () {
      return this.isEdit ? '编辑' : '添加'
    }
  },
  methods: {
    open () {
      this.resetDialog()
    },
    /**
     * 关闭本对话框
     */
    closeDialog () {
      this.dialogVisible = false
    },
    /**
     * 重置数据
     */
    resetDialog () {
      if (this.isAdd) {
        this.form = {}
      }
      if (this.isEdit) {
        this.form = Object.assign({}, this.data)
      }
    },
    /**
     * 提交，添加商品分组数据
     */
    handleSubmit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            this.updateFQA()
          } else if (this.isAdd) {
            this.addFQA()
          }
        }
      })
    },
    /**
     * 添加FQA数据
     */
    addFQA () {
      this.submitLoading = true
      const params = QuestionInsertDTO.instance()
      params.setId(this.goodId)
      params.setQuestion(this.form.question)
      params.setAnswer(this.form.answer)
      saveFqas([params], data => {
        if (data && data.code === ResultCode.OK) {
          this.$message.success('添加数据成功')
          this.$emit('change')
          this.dialogVisible = false
        }
      }, () => {
        this.submitLoading = false
      })
    },
    /**
     * 更新FQA数据
     */
    updateFQA () {
      this.submitLoading = true
      const params = QuestionChangeDTO.instance()
      params.setId(this.form.id)
      params.setQuestion(this.form.question)
      params.setAnswer(this.form.answer)
      changeQuestionById(params, data => {
        if (data && data.code === ResultCode.OK) {
          this.$message.success('更新数据成功')
          this.$emit('change')
          this.dialogVisible = false
        }
      }, () => {
        this.submitLoading = false
      })
    }
  },
  watch: {
    dialogVisible (val) {
      this.$emit('visible', val)
    },
    visible (val) {
      if (this.dialogVisible !== val) {
        this.dialogVisible = val
      }
    }
  }
}
</script>

<style scoped>

</style>
